<template>
   <div class="list-tuijian">
      <div class="container">
          <div 
          v-for="(item) of this.list"
          :key="item.id"
          class="list-item">
            <router-link 
            tag="a" target="_blank"
            :to="{name: 'productDetail', params: {id:item.id}}"  class="img-box">
                <img :src="item.main_img_url" alt="">
            </router-link>
            <div class="title">
                <h1>{{item.name}}</h1>    
                
            </div>  
            
            
          </div>
      </div>
       
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
    name: 'list-product',
    props:{
        list:Array
    },
    data () {
    return {
        msg: 'index',
        
    }
    },
    methods:{
        addlike(id,index){
            console.log(this.list[index])
            this.list[index].stock+=1
            this.axiosLike(id,this.list[index].stock)
        },
        axiosLike(id,stock){
            axios.get(this.baseUrl+'product/addStock',
            {
                params:{
                    id:id,
                    stock:stock
                }
            }).then(this.submitSucc)
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    watch:{
        list(){
            // console.log(this.list)
           
            
        }
    },
    mounted() {


    },

  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
.list-tuijian
    margin-bottom 140px
img 
    width 100%
.container
  container()  
.list-item 
    float left
    width 294px
    // height 353px
    box-sizing border-box
    margin 10px 0
    margin-right 8px
    border 1px solid #f0f1f2
.list-item:nth-child(4n)
    margin-right 0
.img-box
    display block
    height 220px
    width 100%
    overflow hidden
.like 
    background url('~@/assets/product-list/lick.png') no-repeat left center
    padding-left 20px
    float right
    margin-right 10px
    line-height 34px
.title 
    margin 10px 0
    overflow hidden
    text-align center
.title>h1   
    font-size 16px
    line-height 34px
    // float left
    font-weight bold
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

.list-item:hover 
    background white
    // border 1px solid #d5d6d6
.list-item:hover>.title>h1
    color #00a6ba
</style>
